<!DOCTYPE html>
<html>
<head>
    <title>Diagrama de Termodinámica</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: white;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="550"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Estilos y configuración
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = '24px KaiTi'; // Una fuente común para caracteres chinos
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Parámetros del diagrama (coordenadas y dimensiones)
        const centerX = 250;
        const topY = 100;
        const pistonWidth = 120;
        const pistonHeight = 25;
        const airColumnHeight = 320;

        const pistonX = centerX - pistonWidth / 2;

        // 1. Dibujar el pistón
        ctx.strokeRect(pistonX, topY, pistonWidth, pistonHeight);

        // 2. Dibujar el sombreado del pistón
        ctx.save();
        ctx.lineWidth = 1.5;
        const hatchSpacing = 12;
        // Dibujar líneas diagonales de arriba a la derecha hacia abajo a la izquierda
        for (let i = hatchSpacing; i < pistonWidth + pistonHeight; i += hatchSpacing) {
            let x1 = pistonX + i;
            let y1 = topY;
            let x2 = pistonX + i - pistonHeight;
            let y2 = topY + pistonHeight;

            // Recortar las líneas para que queden dentro del rectángulo del pistón
            if (x1 > pistonX + pistonWidth) {
                y1 += (x1 - (pistonX + pistonWidth));
                x1 = pistonX + pistonWidth;
            }
            if (x2 < pistonX) {
                y2 -= (pistonX - x2);
                x2 = pistonX;
            }
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.stroke();
        }
        ctx.restore();

        // 3. Dibujar las paredes del cilindro
        ctx.beginPath();
        ctx.moveTo(pistonX, topY + pistonHeight); // Pared izquierda
        ctx.lineTo(pistonX, topY + pistonHeight + airColumnHeight);
        ctx.moveTo(pistonX + pistonWidth, topY + pistonHeight); // Pared derecha
        ctx.lineTo(pistonX + pistonWidth, topY + pistonHeight + airColumnHeight);
        ctx.stroke();

        // 4. Dibujar etiquetas y flecha

        // Etiqueta "活塞" (Pistón)
        ctx.textAlign = 'left';
        ctx.fillText('活塞', pistonX + pistonWidth + 20, topY + pistonHeight / 2);

        // Etiqueta "注入水银" (Inyectar mercurio)
        ctx.textAlign = 'center';
        ctx.fillText('注入水银', centerX - 30, topY - 40);

        // Flecha para "注入水银"
        function drawArrow(ctx, fromx, fromy, tox, toy) {
            const headlen = 10;
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }
        drawArrow(ctx, centerX - 35, topY - 20, centerX - 20, topY);

        // Etiqueta "空气柱" (Columna de aire)
        ctx.font = '30px KaiTi';
        const airColumnTextX = pistonX + 30;
        const airColumnCenterY = topY + pistonHeight + airColumnHeight / 2;
        ctx.fillText('空', airColumnTextX, airColumnCenterY - 40);
        ctx.fillText('气', airColumnTextX, airColumnCenterY);
        ctx.fillText('柱', airColumnTextX, airColumnCenterY + 40);

        // Etiqueta de la figura "热图 1.15.1"
        ctx.font = '24px KaiTi';
        ctx.fillText('热图 1.15.1', centerX, topY + pistonHeight + airColumnHeight + 60);

    </script>
</body>
</html>